<template>
  <div>
    <div>
      <button @click="play">play</button>
    </div>
    <HandscrollAnimation
        ref="handscrollRef"
        :leftScrollImage="endImage"
        :rightScrollImage="endImage"
        :contentImage="backgroundImage"
        initialState="middle"
        animationDuration="5000ms"
        width="800px"
        height="400px"
    >
      <!-- 自定义内容 -->
      <div class="custom-content">
        <div>
          <h2>富春山居图</h2>
          <p>还不赶紧点赞收藏加关注吗？！@球球不吃虾</p>
        </div>
      </div>
    </HandscrollAnimation>
  </div>

</template>

<script setup>
import HandscrollAnimation from './components/HandscrollAnimation.vue'
import endImage from '@/assets/Snipaste_2025-05-23_14-13-39(1)(1).png'
import backgroundImage from '@/assets/Snipaste_2025-05-23_14-13-39(1)(2).png'
import {ref} from 'vue'

const handscrollRef = ref(null)
const play = () => {
  handscrollRef.value.play()
}
</script>
<style scoped>
.custom-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 24px;
  color: #333;
}
</style>
